<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        #userInfoDialog {
            padding: 20px;
            width: 400px;
            display: none; /*隐藏层*/
        }

        #userInfoDialog p {
            padding: 10px 0;
        }
    </style>


</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">歌单列表</div>
        <div class="layui-card-body">
            <table id="musiclist" lay-filter="musiclistFilter"></table>
        </div>
    </div>
</div>

<!--歌单详情对话框-->
<div id="details" style="display: none;padding: 20px">
    <table class="layui-table" lay-skin="nob">
        <tr>
            <td rowspan="3">
                <img src="" id="coverimg" height="96px" alt="">
            </td>
            <td colspan="2">
                <h2><span id="listname"></span></h2>
                <span><i class="layui-icon layui-icon-username"></i><span id="create"></span></span>
            </td>
        </tr>
        <tr>
            <td colspan="2">标签: <span id="tags"></span></td>
        </tr>
        <tr>
            <td>点击量: <span id="clickcount"></span></td>
            <td>歌曲总数: <span id="musiccount"></span></td>
        </tr>
    </table>

    <!-- 专辑详情表-->
    <table id="musiclistDetails"></table>
</div>

<script src="../res/layui/layui.js"></script>
<script>
    layui.use(function () {
        //加载获取table模块
        var table = layui.table;
        //加载获取layer弹层模块
        var layer = layui.layer;
        //加载jquery对象
        var $ = layui.jquery;

    })
</script>


<!--操作栏自定义模板-->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-more"></i>
            详情
        </button>
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>
            修改
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </div>
</script>


</body>
</html>